<template>
    <div class="ly-content">
        <div class="ly-center">
            <Card>

                <div class="ly-item">
                    <div class="left"><span>*</span>标题</div>
                    <div class="right">
                        <el-input
                            style="width: 360px"
                            placeholder="请输入内容"
                            v-model="news.theme"
                            clearable>
                        </el-input>
                    </div>
                </div>

                <div class="ly-item">
                    <div class="left"><span>*</span> 摘要</div>
                    <div class="right">
                        <el-input
                            style="width: 360px"
                            type="textarea"
                            placeholder="请输入内容"
                            v-model="news.synopsis"
                            clearable>
                        </el-input>
                    </div>
                </div>

                <div class="ly-item">
                    <div class="left">缩略图</div>
                    <div class="right">
                        <el-upload
                            class="avatar-uploader"
                            accept="image/jpeg,image/jpg,image/png"
                            :action="act"
                            :data="fileName"
                            :show-file-list="false"
                            :headers="{'x-access-token':token}"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" v-bind:src="imageUrl" class="ly-avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                    <div class="ly-tips">610px*180px</div>
                </div>
                <div class="edit_container">
                    <!--  新增时输入 -->
                    <quill-editor
                        v-model="news.newsContent"
                        ref="myQuillEditor"
                        :options="editorOption"
                        @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                        @change="onEditorChange($event)">
                    </quill-editor>
                </div>
                <div class="ly-btn">
                    <el-button type="primary" @click="handleUp">创建新闻</el-button>
                </div>
            </Card>
        </div>
    </div>

</template>
<script>
    import {quillEditor} from "vue-quill-editor"; //调用编辑器
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import moment from "moment";

    import baseURL from '_conf/url'
    import Cookies from 'js-cookie'
    import {TOKEN_KEY} from '@/libs/util'

    const token = Cookies.get(TOKEN_KEY)
    const act = baseURL + "/common/uploadImg"
    export default {
        components: {
            quillEditor
        },
        data() {
            return {
                token: token,
                str: '',
                editorOption: {
                    placeholder: "发布内容"
                },
                news: {},
                act: act,
                imageUrl: '',
                dialogVisible: false,
                fileName: {fileName: "news-img/"},
            }
        },
        created: function () {
            this.getNews();
        },
        methods: {
            //修改时，得到新闻内容
            getNews() {
                if (this.$route.query.news) {
                    this.news = this.$route.query.news;
                    this.imageUrl = this.news.themeImg;
                }
            },
            onEditorReady(editor) { // 准备编辑器

            },
            onEditorBlur() {
            }, // 失去焦点事件
            onEditorFocus() {
            }, // 获得焦点事件
            onEditorChange() {
            }, // 内容改变事件
            // 转码
            escapeStringHTML(str) {
                str = str.replace(/&lt;/g, '<');
                str = str.replace(/&gt;/g, '>');
                return str;
            },
            handleUp: function () {
                if(this.news.newsContent){
                    this.news.newsContent = this.escapeStringHTML(this.news.newsContent);
                }
                this.postRequest("/api/newsPlacard/save", this.news).then(res => {
                    console.log(res)
                    if (res.code == 20000) {
                        this.$Message.success({
                            content: "创建成功",
                            duration: 5
                        });
                        this.$router.push({path: '/news/list'});
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            handleShow: function () {
                this.str = this.escapeStringHTML(this.news.newsContent);
                this.dialogVisible = true;
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.news.themeImg = res;
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isLt2M;
            },
        },
        computed: {
            editor() {
                return this.$refs.myQuillEditor.quill;
            },
        },
        mounted() {
            let content = '';  // 请求后台返回的内容字符串
            this.str = this.escapeStringHTML(content);
        }
    }
</script>

<style>
    .ly-center .ql-editor {
        min-height: 300px;
    }

    .ly-center .ql-editor img {
        max-width: 100%;
        height: auto;
    }
</style>
<style scoped lang="scss">

    .ly-item {
        width: 100%;
        height: auto;
        display: flex;
        margin-bottom: 10px;
        .left {
            width: 100px;
            height: 40px;
            line-height: 40px;
            padding-right: 20px;
            text-align: right;
            span {
                color: red;
            }
        }
        .rihgt {
            flex: 1;
        }
        .ly-tips {
            font-size: 12px;
            color: #ccc;
            padding-left: 5px;
        }
    }

    .ly-btn {
        margin-top: 20px;
    }

    .avatar-uploader .el-upload {
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        img {
            max-width: 360px;
        }
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 360px;
        height: 154px;
        line-height: 154px;
        text-align: center;
        border: 1px dashed #d9d9d9;
    }

    .avatar-uploader-icon:hover {
        border-color: #409EFF;
    }

    /*.avatar {*/
    /*width: 154px;*/
    /*height: 154px;*/
    /*display: block;*/
    /*}*/
</style>

<style>
    .editor {
        line-height: normal !important;
        height: 800px;
    }
    .ql-snow .ql-tooltip[data-mode=link]::before {
        content: "请输入链接地址:";
    }
    .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
        border-right: 0px;
        content: '保存';
        padding-right: 0px;
    }

    .ql-snow .ql-tooltip[data-mode=video]::before {
        content: "请输入视频地址:";
    }

    .ql-snow .ql-picker.ql-size .ql-picker-label::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item::before {
        content: '14px';
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
        content: '10px';
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
        content: '18px';
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
        content: '32px';
    }

    .ql-snow .ql-picker.ql-header .ql-picker-label::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item::before {
        content: '文本';
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
        content: '标题1';
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
        content: '标题2';
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
        content: '标题3';
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
        content: '标题4';
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
        content: '标题5';
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
        content: '标题6';
    }

    .ql-snow .ql-picker.ql-font .ql-picker-label::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item::before {
        content: '标准字体';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
        content: '衬线字体';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
        content: '等宽字体';
    }
</style>
